<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="属性名" prop="dictType">
        <el-input v-model="ruleForm.dictType" maxlength="64" />
      </el-form-item>
      <el-form-item label="列表名称" prop="dictTableName">
        <el-input v-model="ruleForm.dictTableName" maxlength="64" />
      </el-form-item>
      <el-form-item label="值" prop="dictValueString">
        <el-input v-model="ruleForm.dictValueString" maxlength="64" placeholder="【输入方式】多个值由分号；分割  【举例】领域1；领域2；领域3" @input="onInput()" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addLabel, updateLabel } from '@/api/codeManage'
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      ruleForm: {
        dictType: '',
        dictTableName: '',
        dictArray: '',
        dictValueString: ''
      },
      rules: {
        dictType: [
          { required: true, message: '请输入属性名', trigger: 'blur' }
        ],
        dictTableName: [
          { required: true, message: '请输入列表名称', trigger: 'blur' }
        ],
        dictValueString: [
          { required: true, message: '请输入值', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onInput() {
      this.$forceUpdate()
    },
    show(obj) {
      this.ruleForm = {
        dictType: '',
        dictTableName: '',
        dictArray: '',
        dictValueString: ''
      }
      this.dialogVisible = true
      this.title = obj.title
      if (this.title === '修改字段') {
        this.ruleForm = obj.data
        this.ruleForm.dictValueString = obj.data.dictArray.join(';')
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const separator = /;|；/
          const valueListTemp = this.ruleForm.dictValueString.split(separator)
          const valueList = []

          for (let i = 0; i < valueListTemp.length; i++) {
            valueListTemp[i] = valueListTemp[i].trim()
            if (valueListTemp[i] !== '') {
              valueList.push(valueListTemp[i])
            }
          }

          this.ruleForm.dictArray = valueList

          const params = {
            dictType: this.ruleForm.dictType,
            dictTableName: this.ruleForm.dictTableName,
            dictArray: this.ruleForm.dictArray
          }

          if (this.title === '添加字段') {
            addLabel(params).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '添加失败',
                  type: 'error'
                })
              }
            }).finally(() => {
              this.dialogVisible = false
              this.$emit('init')
            })
          } else if (this.title === '修改字段') {
            params.dictId = this.ruleForm.dictId
            updateLabel(params).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                })
              }
            }).finally(() => {
              this.dialogVisible = false
              this.$emit('init')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.dialogVisible = false
      this.$emit('init')
    }
  }
}
</script>

<style>
</style>
